<div class="front-bg">
    <img class="front-image" src="imgs/welcome3.jpg">
</div>

<div class="front-welcome">
    <h1>欢迎来到重邮树洞网。</h1>
    <br>
    <div class="front-text">
        童话故事《皇帝长了驴耳朵》里，说一个国王长了一对驴耳朵，每个给他理发的人时候都会忍不住告诉别人，从而被砍头。有一个理发匠把这个秘密藏得好辛苦，终于在快憋不住时。就在山上对着一个大树洞说出了这个秘密。结果从此这树上的叶子只要放在嘴边一吹，就会发出“国王有驴耳朵”的声音。因为这个童话故事，“树洞”一词逐渐有了“隐藏秘密”的隐喻。
    </div>
</div>

<div class="sun">
    <img src="imgs/sun.png" height="100" width="100" />
</div>

<script type="text/javascript">
    (function ($, window) {
        if(window.myInterval){
            return ;
        } else {
            var imageSrcs = ['imgs/welcome1.jpg', 'imgs/welcome2.jpg', 'imgs/welcome3.jpg'];
            var welcomeText = [
                "童话故事《皇帝长了驴耳朵》里，说一个国王长了一对驴耳朵，每个给他理发的人时候都会忍不住告诉别人，从而被砍头。有一个理发匠把这个秘密藏得好辛苦，终于在快憋不住时。就在山上对着一个大树洞说出了这个秘密。结果从此这树上的叶子只要放在嘴边一吹，就会发出“国王有驴耳朵”的声音。因为这个童话故事，树洞”一词逐渐有了“隐藏秘密”的隐喻。",
                "<p>不管你来自何方</p><p>身处何处</p><p>是高兴还是悲伤</p><p>是对对未来充满希望还是对过去念念不忘</p><p>停下你匆忙的脚步</p><p>平静你浮躁的心情</p><p>分享喜悦道出苦闷</p><p>树洞在这里倾听你的故事</p>",
                "<p>在电影《花样年华》里，梁朝伟站在吴哥窟的那个树洞前，诉说自己的心思，然后用草把树洞封上。从此，没有人知道他心里曾发生过什么故事，他曾牵挂过谁，默念过谁，又欺瞒过谁，伤害过谁。</p><p>你或者也需要这样一个树洞，把不可说的丢在里面。</p>"
            ];
            var imageCount = imageSrcs.length;
            var i = 1;
            var interval = setInterval(function () {
                if(i === imageCount){
                    i = 0;
                }
                $('.front-bg >img').eq(0).animate({opacity: 0.1}, 300,function () {
                    $('.front-text').eq(0).html(welcomeText[i]);
                    $(this).attr('src', imageSrcs[i++]).animate({opacity: 1}, 500);
                });
            }, 8000);
            window.myInterval = interval;
        }
    })(jQuery, window);
</script>